<template>
	<view>
		<view class="header">
			<view class="name"> {{name}} </view>
			<view class="con">{{con}}</view>
		</view>
		<view class="content">
			<view class="item" v-for="(item, i) in list" :key="i">
				<view class="title">{{i+1}}、{{item.questionTitle}}</view>				
				<view class="example-body">
					<uni-rate :value="ans[i]" @change="score(i, $event)" margin="10" />
				</view>
			</view>
		</view>
		<view class="footer">
			<button type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		components: {
			uniRate
		},
		data() {
			return {
				name: '',
				con: '',
				list: [],
				ans: []
			}
		},
		methods: {
			score(i, e) {
				this.ans[i] = e.value
			}
		},
		onLoad(option) {
			let data = uni.getStorageSync('assessment')
			if(data){
				data = JSON.parse(data)
				this.name = data.name
				this.con = data.con
				this.list = data.question
				this.ans = new Array(this.list.length).fill(0)
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFAEE;
		background-image: linear-gradient(#FFFAEE, #ffe0c5);
		font-family: 'Courier New', Courier, monospace;
	}
	
	.header {
		padding: 20px 10px;
		margin: 0 10px;
		border-radius: 20px;
		color: #646464;
		text-align: center;
		font-family: 'Courier New', Courier, monospace;
	}

	.header .name {
		font-size: 25px;
	}

	.header .con {
		margin: 10px 0;
	}

	.content .item {
		margin: 10px 20px;
		padding: 10px;
		border: 1px dotted #C0C0C0;
		border-radius: 15px;
		background-color: #FFFFFF;
		box-shadow: 10px 10px 5px #888888;
	}

	.content .title {
		margin-bottom: 10px;
	}

	.content .option {
		border-bottom: 1px solid #dde5ed;
		border-radius: 5px;
		padding: 10rpx;
		margin-bottom: 10rpx;
	}

	.content .option radio {
		margin: 0 10px;
	}

	.footer {
		margin: 30px 20px 50px 20px;
	}
	
	.example-body {
		flex-direction: column;
		padding: 30rpx;
		background-color: #ffffff;
		text-align: center;
	}
</style>